<template>
<div class="content-box search_form">

    <cellbox middle class="title-manage">
      <cell-item>
        <heading grade='1'>{{title}}</heading>
      </cell-item>
      <cell-item class="tr small weak">
        <el-button @click="handleAddClass" class="orange-btn" style="float:right;">新增班级</el-button> 
      </cell-item>
    </cellbox>
    <el-form v-bind="getFormProps()" label-width="80px">
      <el-row>
        <el-col :span="9">
          <el-form-item label="课 程">
            <el-select v-model="form.curriculum" clearable value-key="id" placeholder="请选择课程" style="width: 100%;">
              <el-option v-for="item in train_selectclass_list" :key="item.id" :label="item.courseName" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="校 区">
            <el-select v-model="form.campus" clearable value-key="id" placeholder="请选择校区" style="width: 100%;">
              <el-option v-for="item in schoolList" :key="item.id" :label="item.schoolName" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label-width="10px">
            <el-button type="primary" class="search-btn" native-type="submit">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="教 练">
            <el-select v-model="form.coach" value-key="id" clearable placeholder="请选择教练" style="width: 100%;">
              <el-option v-for="item in train_teacher_list" :key="item.id" :label="item.teacherName" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" label-width="25px">
            <el-input v-model="form.keyword" placeholder="请输入搜索内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="开课状态">
        <el-checkbox-group v-model="form.classState">
          <el-checkbox label="0" name="type">未开课</el-checkbox>
          <el-checkbox label="1" name="type">上课中</el-checkbox>
          <el-checkbox label="2" name="type">已上完</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <!--tableList-->
    <div class="table_list">
      <el-table
        :data="train_class_list.list"
        stripe
        style="width: 834px">
        <el-table-column
          label="班级名称"
          :show-overflow-tooltip="true"
          width="180">
          <template scope="scope">
            <p>{{ scope.row.className }}</p>
            <span class="state_class statr_yellow" v-if="scope.row.startStatus == 0">未开课</span>
            <span class="state_class statr_green" v-if="scope.row.startStatus == 1">上课中</span>
            <span class="state_class statr_gren" v-if="scope.row.startStatus == 2">已上完</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="courseName"
          align="center"
          :show-overflow-tooltip="true"
          label="课程"
          width="118">
        </el-table-column>
        <el-table-column
          width="128"
          align="center"
          :show-overflow-tooltip="true"
          label="校区/班别">
          <template scope="scope">
            <p>{{scope.row.schoolName}}</p>
            <p>{{scope.row.classesName}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="上课周期"
          :show-overflow-tooltip="true"
          align="center"
          width="156">
          <template scope="scope">
            <p>{{scope.row.beginTime | FormatDate('yyyy.MM.dd')}} - {{scope.row.endTime | FormatDate('yyyy.MM.dd')}}</p>
            <p>{{scope.row.weekCycle | getWeekList}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="lessonCount"
          align="center"
          :show-overflow-tooltip="true"
          label="课时数"
          width="60">
        </el-table-column>
        <el-table-column
          prop="treachNames"
          align="center"
          :show-overflow-tooltip="true"
          label="教练"
          width="80">
        </el-table-column>
        <el-table-column
          prop="studentCount"
          align="center"
          label="人数"
          :show-overflow-tooltip="true"
          width="60">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="50">
          <template scope="scope">
            <p><el-button @click="handleShow(scope.row.id, scope.row.courseId)" type="text" size="small">详情</el-button></p>
            <p><el-button @click="handleEdit(scope.row.id)" type="text" size="small" v-if="scope.row.startStatus == 0">编辑</el-button></p>
            <p><el-button @click="handleDelete(scope.row.id)" type="text" size="small" v-if="scope.row.studentCount == 0">删除</el-button></p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <el-pagination
      v-bind="getPaginationProps(train_class_list)"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { pagingList } from 'utils/mixins'
import trainApi from 'api/train'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      train_currilum_list: 'train_currilum_list',
      train_class_list: 'train_class_list',
      train_teacher_list: 'train_teacher_list',
      train_selectclass_list: 'train_selectclass_list'
    })
  },
  watch: {
    'form.curriculum' (value) {
      this.query.courseId = value.id
      this.query.curricuNmae = value.courseName
    },
    'form.campus' (value) {
      this.query.schoolId = value.id
      this.query.schoolName = value.schoolName
    },
    'form.coach' (value) {
      this.query.teacherId = value.id
      this.query.teacherName = value.teacherName
    },
    'form.keyword' (value) {
      this.query.searchContent = value
    },
    'form.classState' (value) {
      this.query.classStatus = value.join()
    }
  },
  mounted () {
    this.form.curriculum = {
      id: this.query.courseId ? Number(this.query.courseId) : '',
      courseName: this.query.curricuNmae ? this.query.curricuNmae : ''
    }
    this.form.campus = {
      id: this.query.schoolId ? Number(this.query.schoolId) : '',
      schoolName: this.query.schoolName ? this.query.schoolName : ''
    }
    this.form.coach = {
      id: this.query.teacherId ? Number(this.query.teacherId) : '',
      teacherName: this.query.teacherName ? this.query.teacherName : ''
    }
    this.form.keyword = this.query.searchContent
    this.form.classState = this.query.classStatus ? this.query.classStatus.split(',') : []
    this.$store.dispatch('train_teacher_list')
    this.$store.dispatch('train_selectclass_list')
    this.getSchoolList()
  },
  data () {
    return {
      title: '班级管理',
      query: this.getQuery(),
      form: {
        curriculum: '',
        campus: '',
        keyword: '',
        coach: '',
        classState: []
      },
      schoolList: []
    }
  },
  methods: {
    fetch (query) {
      this.$store.dispatch('train_class_list', query)
    },
    getSchoolList () {
      trainApi.schoolList({
        page: 1,
        rows: 100000
      }).then((res) => {
        this.schoolList = res.data.list
      })
    },
    handleAddClass () {
      if (this.train_selectclass_list.length === 0) {
        this.$message({
          message: '课程审核通过后才可新增班级哦',
          type: 'warning'
        })
      } else {
        this.$router.push({path: '/training/class/add'})
      }
    },
    handleEdit (id) { // 编辑
      this.$router.push({path: '/training/class/add', query: {id: id, isedit: 'edit'}})
    },
    handleShow (classId, crriulumId) { // 查看详情
      this.$router.push({path: '/training/class/detail', query: {id: classId, crruid: crriulumId}})
    },
    handleDelete (classId) { // 删除
      this.$confirm('确认删除该班级吗?', '温馨提示', {
        type: 'warning'
      }).then(() => {
        trainApi.classRemove({
          id: classId
        }, {
          successMsg: '删除成功'
        }).then((res) => {
          this.fetch(this.query)
        })
      }).catch(() => {
        return false
      })
    }
  }
}
</script>
<style lang="scss">
.title-manage {
    margin-top: -25px;
  }
.table_list{
  margin-top:30px;
  .cell{
    font-size:12px;
    padding:0 10px;
  }
  td{
    position: relative;
    .state_class{
      position: absolute;
      bottom:0px;
      padding: 0 2px;
      line-height:16px;
      height:16px;
      right:6px;
      color: #fff;
    }
    .statr_green{
      background:#019b6e;
    }
    .statr_yellow{
      background: #f06802;
    }
    .statr_gren{
      background: #ccc;
    }
  }
  .logo{
    width:40px;
    height:30px;
  }
  .el-button--text,.alink_color{
    color:#2a82ee;
  }
}
</style>
